<template>
	<view class="question">
		<view class="box">
			<view class="questTit mb20 fwb">{{sindex+1}}.{{quest.content}}</view>
			<radio-group @change="changeRadio">
				<label class="radio" v-for="(item,index) in quest.option" :key='index'>
					<radio :value="item.score" :checked="item.checked" color="#ab273c" /><text>{{item.text}}</text>
				</label>
			</radio-group>
		</view>
		<view class="flex flex-jcsa mt60">
			<view class="btn" v-show="sindex != 0" @click="pre">上一项</view>
			<view class="btn" @click="next">下一项</view>
		</view>
	</view>
</template>

<script>
	import question from '../../core/question.js'
	export default {
		name: "",
		data() {
			return {
				question: this.$utils.deepClone(question.screen),
				isClick: true,
			}
		},
		props: {
			sindex: {
				type: Number,
				default: -1,
				isClick: true,
			}
		},
		computed: {
			quest() {
				return this.question[this.sindex]
			}
		},
		methods: {

			// 上一题
			pre() {
				this.$emit('changeindex', {
					sindex: this.sindex - 1
				});
			},
			// 下一题
			next() {
				let score = ''
					if (this.quest.option.every(item => item.checked == false)) {
						uni.showToast({
							title: "请先完成此题",
							icon: "none"
						})
						return false
					}

					if (this.sindex > 7) {
						for (let i = 0; i < this.question.length; i++) {
							score += String(this.question[i].option.find(item => {
								return item.checked
							}).score)
						}
					}

					this.$emit('changeindex', {
						sindex: this.sindex + 1,
						data: score,
					})
			},
			/**选择选项
			 * @param {Object} e 
			 */
			changeRadio(e) {
				this.quest.option.forEach(item => item.checked = false)
				this.quest.option[e.detail.value].checked = true;
				setTimeout(() => {
					this.next()
				}, 500)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.question {
		width: 100%;
		height: 100vh;
		padding-top: 10vh;
		background-color: #f5f5f5;
	}

	.box {
		width: 90%;
		height: auto;
		background-color: #f5f5f5;
		margin: 0 auto 0;

		.radio {
			width: 100%;
			height: 92rpx;
			line-height: 92rpx;
			margin-top: 20rpx;
			border-radius: 14rpx;
			background: #fff;
			display: block;
		}
	}

	.btn {
		width: 35%;
		height: 84rpx;
		line-height: 84rpx;
		color: #fff;
		background-color: #ab273c;
		margin: 100rpx auto 0;
	}
</style>
